/**
* Created by wl
* 项目管理>已退出-列表页
*/
<template>
    <div>
        <div class="right">
            <el-row class="ca-title">
                <el-col :span="20">
                    <h3>已退出项目</h3>
                </el-col>
            </el-row>
            <el-form ref="form" :model="form" status-icon class="ca-box ca-m-t-15" align="center">
                <el-row class="ca-m-t-20">
                    <el-col :span="7">
                        <el-form-item label="行业：" label-width="120px">
                            <el-select v-model="current.industry" style="width: 100%;">
                                <el-option label="全部" value=''></el-option>
                                <el-option
                                v-for="item in dropDown.industry"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="投资基金：" label-width="120px">
                            <el-select v-model="current.fundId" style="width: 100%;">
                                <el-option label="全部" value=''></el-option>
                                <el-option
                                v-for="item in fundList"
                                :key="item.fundId"
                                :label="item.fundName"
                                :value="item.fundId"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="9">
                        <el-form-item label="项目名称：" label-width="120px">
                           <el-input v-model="current.itemName" placeholder="支持模糊搜索" @keyup.enter.native="getList"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="ca-m-b-20">
                    <el-col :span="24" align="center">
                        <el-button type="primary" @click="getList">查询</el-button>
                        <el-button type="primary" :disabled="!isAuthDown" @click="downloadFile">下载</el-button>
                    </el-col>
                </el-row>
            </el-form>
            <div class="ca-m-t-15">
                <el-table
                    :data="fundData"
                    @sort-change="sortChange"
                    class="table_p_01 el-wid-100 ca-table">
                    <el-table-column label="序号" type="index" align="center" width="80px">
                        <template slot-scope="scope">
                            {{(current.pageIndex-1)*current.pageSize+scope.$index+1}}
                            <!--<csRedDot :label="scope.$index+1+''" :showDot="scope.row.red==1?true:false" :type="1"></csRedDot>-->
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="项目名称"
                        prop="itemName"
                        sortable="custom"
                        >
                        <template slot-scope="scope">
                            <el-tooltip :content="scope.row.itemName" placement="top">
                                <el-button type="text" class="ca-underline ca-text-over-flow-ellipsis" @click="goIndex(scope.row)"  :disabled="!isAuthIndexSee">{{scope.row.itemName}}</el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="投资基金"
                        prop="fundName"

                        sortable="custom">
                        <template slot-scope="scope">
                            <el-tooltip :content="scope.row.fundName" placement="top">
                                <el-button type="text" class="ca-underline ca-text-over-flow-ellipsis" @click="goFundIndex(scope.row)">{{scope.row.fundName}}</el-button>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="investDateFirst"
                        label="投资时间"
                        sortable="custom">
                        <template slot-scope="scope">
                            {{$moment(scope.row.investDateFirst).format('YYYY-MM-DD')}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="investAmount"
                        label="初始投资金额</br>（万元）"
                        :render-header="renderTitle"

                        sortable="custom">
                        <template slot-scope="scope">
                            {{scope.row.investAmount | format1}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="investDateLast"
                        label="退出时间"
                        show-overflow-tooltip

                        sortable="custom">
                        <template slot-scope="scope">
                            {{$moment(scope.row.investDateLast).format('YYYY-MM-DD')}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="exitTotalCapita"
                        label="退出总额</br>（万元）"
                        :render-header="renderTitle"

                        sortable="custom">
                        <template slot-scope="scope">
                            {{scope.row.exitTotalCapita | format1}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="bonusTotalCapita"
                        label="分红金额</br>（万元）"
                        :render-header="renderTitle"

                        sortable="custom">
                        <template slot-scope="scope">
                            {{scope.row.bonusTotalCapita | format1}}
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="exitMultiple"
                        label="退出倍数"
                        >
                    </el-table-column>
                    <el-table-column
                        prop="irr"
                        label="IRR"
                        sortable="custom">
                        <template slot-scope="scope">
                            {{scope.row.irr | format1}}%
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current.pageIndex"
            :page-sizes="vuePageSizes"
            :page-size="vuePageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
            class="use-list-pagination ca-m-t-20">
            </el-pagination>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import {api} from './api';
    import {STATUS_HTTP_SUCCESS, apiHttp} from '__service/csHttp';
    import { isNoAuth } from '__service/utils';
    export default {
        data() {
            return {
                isAuthIndexSee: isNoAuth('已退出项目-列表页-查看'),
                isAuthDown: isNoAuth('已退出项目-列表页-下载'),
                form: {
                    name: '',
                },
                downLoadName: '',
                fundData: [],
                totalCount: 0,
                current: {
                    orderBy: '', //排序名称
                    sort: '', //排列顺序
                    itemName: '', // 项目名称
                    industry: '', // 项目行业
                    fundId: '', // 投资基金
                    pageIndex: 1, // 页号
                    pageSize: this.vuePageSize, // 每页条数
                },
                currentCopy: {
                    orderBy: '', //排序名称
                    sort: '', //排列顺序
                    itemName: '', // 项目名称
                    industry: '', // 项目行业
                    fundId: '', // 投资基金
                    pageIndex: 1, // 页号
                    pageSize: this.vuePageSize, // 每页条数
                },
                fundList: [], //投资基金列表
                dropDown: {
                    industry: this.$store.state.user.dictionaryMap.industry, // 行业
                },
            }
        },
        watch: {

        },
        props: {},
        mounted() {
            this.getList()
            this.getFundList()
        },
        beforeRouteEnter(to, from, next) {
            next(vm=>{
                if (!vm.isAuthIndexSee) {
                    vm.$message({
                        message: '没有此页面的操作权限',
                        type: 'error',
                        center: true
                    });
                    vm.$router.replace({name: 'personal-center', params: {tabIndex: 0}})
                    return;
                }
            });
        },
        methods: {
            handleSizeChange(val) {
                this.current.pageSize = val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.current.pageIndex = val;
                if (val > this.totalPage) {
                    this.current.pageIndex = this.totalCount
                }
                this.getList();
            },
            // 查询列表
            getList() {
                // this.downLoadName = this.current.itemName
                apiHttp(api.INVESTED_LIST,this.current).then(ret=> {
                    if (ret.resCode === STATUS_HTTP_SUCCESS) {
                        this.fundData = ret.data.resultData;
                        this.totalCount = ret.data.totalCount;
                        this.currentCopy = Object.assign({}, this.current);
                    }
                })
            },
            // 基金列表
            getFundList() {
                this.fundList = []
                apiHttp(api.INVESTED_LIST,this.current).then(ret=> {
                    if (ret.resCode === STATUS_HTTP_SUCCESS) {
                        if (ret.data.resultData.length > 0) {
                            this.fundList[0] = ret.data.resultData[0]
                            this.fundList.map(item => {
                                if (item.fundId && item.fundName) {
                                    ret.data.resultData.map(value => {
                                        if (value.fundId !== item.fundId) {
                                            this.fundList.push({fundId: value.fundId, fundName: value.fundName})
                                        }
                                    })
                                }
                            })
                        }
                    }
                })
            },
            goIndex(row) {
                this.$router.push({name: 'invested-project-detail', params: {itemId: row.id, tabIndex: 2, openWindow: true }});
            },
            goFundIndex(row) {
                if (row.fundClick) {
                    this.$router.push({name: 'investing-funds', params: {fundId: row.fundId, tabIndex: 0, openWindow: true }});
                }
            },
            //文件下载
            downloadFile() {
                if (this.fundData.length === 0) {
                    this.$message({
                         type: 'warning',
                         message: '暂无数据!',
                         center: true
                     });
                 } else {
                     window.open(this.baseURL + api.EXPORT_FILE.url + '?X-Token=' + this.$store.state.user.token + '&type=19&name=' + this.currentCopy.itemName + '&industry=' + this.currentCopy.industry + '&fundId=' + this.currentCopy.fundId);
                 }
            },
            //排序
            sortChange(params) {
                if (!params.order) {
                     this.current.orderBy = '';
                     this.current.sort = '';
                 } else {
                     this.current.sort = params.order === 'ascending' ? 'asc' : 'desc';
                     this.current.orderBy = params.prop;
                     this.getList();
                 }
            }
        },
        components: {

        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.use-list-pagination{
    margin: 31px  25%;
}
.el-wid-100 {
    width: 100%;
}
</style>
